<template>
    <div class="app">
        <h1>{{ msg }}学校名是:{{schoolName}},学生姓名是:{{ studentName }}</h1>

        <!-- 通过父组件给子组件传递函数类型的props实现：子给父传递数据 -->
        <School :getSchoolName="getSchoolName"/>

        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第一种写法，使用@或v-on） -->
        <!--<Student v-on:myEvent="getStudentName"/>-->
        <Student @myEvent="getStudentName" @demo="demo"/>
        <!--<Student @myEvent.once="getStudentName"/>-->

        <!-- 通过父组件给子组件绑定一个自定义事件实现：子给父传递数据（第二种写法，使用ref）,this.$ref.student获取student的vc实例对象 -->
        <!-- 如果要使用原生的事件，比如click事件，那么需要加.native，因为vue默认事件为自定义事件 -->
        <Student ref="student" @click.native="show"/>
    </div>
</template>

<script>
import Student from '@/components/Student.vue'
import School from '@/components/School.vue'

export default {
    name: 'App',
    components: {School, Student},
    data() {
        return {
            msg: '你好啊！',
            schoolName: '',
            studentName: ''
        }
    },
    methods: {
        getSchoolName(name) {
            this.schoolName = name
        },
        getStudentName(name,...param) {
            this.studentName = name
            console.log(name,param)
        },
        demo() {
            console.log('demo事件触发了')
        },
        show() {
            alert(111)
        }
    },
    mounted() {
        // 当组件开始挂载时，获取student的vc实例对象，绑定自定义事件
        this.$refs.student.$on('myEvent',this.getStudentName)
        // this.$refs.student.$once('myEvent',this.getStudentName) // 事件触发一次就不再触发

        // 使用ref这种方式的好处是，可以异步的绑定自定义事件（非实时的）,更灵活
        // setTimeout(()=>{
        //     this.$refs.student.$on('myEvent',this.getStudentName)
        // },3000)
    }
}
</script>

<style scoped>
.app {
    background-color: gray;
    padding: 5px;
}
</style>